<!-- 维修工单 -->
<template>
	<view>
		<view class="box" v-if="isLong">
			<!-- 搜索 -->
			<search placeholder='请输入搜索报修人' @searchKey="searchKey" style="flex-shrink: 0;"></search>
			<view class="no-warpper list-box" v-if="hasInfo">
				<view class="scroll-box" @scrolltolower="onBottom">
					<view class="item nl-shadow-box" v-for="(item,index) in repairList" :key="index">
						<view class="top">
							<text class="room">{{item.repairObjName}}</text>
							<text class="time">{{item.appointmentTime}}</text>
						</view>
						<view class="bottom">
							<view class="repair-people">报修人：{{item.repairName}}-{{item.tel}}</view>
							<view class="botton-list">
								<view class="button-mini main m8" v-if="item.repairWay == '200'&&item.state == '1000'"
									@click="turnSingle(item,'DISPATCH')"><button>派单</button></view>
								<view class="button-mini yellow m8" v-if="item.repairWay == '100'&&item.state == '1000'"
									@click="grabbingRepair(item.repairId)"><button>抢单</button></view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>

			<!-- 无数据 渲染缺省图 -->
			<view v-if="hasInfo == false">
				<noData :noDataText="noDataText"></noData>
			</view>
		</view>

		<!-- 网络错误 -->
		<view v-else>
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getListOwnerRepairs,
		grabbingRepair
	} from 'api/repair';
	export default {
		data() {
			return {
				listBox: [], // 避免上拉刷新时，页面出现空白
				repairList: [],
				page: 1,
				records: 0,
				status: 'loadmore',
				repairName: '', //报修人

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: '', // 是否有数据
				noDataText: '暂无数据~',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad() {
			// this.getListOwnerRepairs(1)
		},
		onShow() {
			this.page = 1
			this.records = 0
			this.listBox = []
			this.getListOwnerRepairs(1)
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.records = 0
			this.listBox = []
			this.getListOwnerRepairs(1)
		},
		// 上拉加载
		onReachBottom() {
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发

			} else {
				this.status = 'loading';
				if (this.page <= this.records) {
					this.getListOwnerRepairs(this.page)
				} else {
					this.status = 'nomore';
				}
			}
		},
		methods: {
			/**
			 * 获取工单列表
			 */
			getListOwnerRepairs(page) {
				let that = this
				let data = {
					storeId: this.userInfo.storeId,
					userId: this.userInfo.userId,
					communityId: this.userCommunity.communityId,
					repairName: this.repairName,
					page: page,
					row: 10,
				}

				getListOwnerRepairs(data).then((res) => {
					if (res.code == 0) {
						if (res.records == 0) { //暂无数据
							that.hasInfo = false
							that.isLong = true;
							uni.hideLoading()
							uni.stopPullDownRefresh()
							return;
						}

						that.records = res.records
						if (that.records == that.page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.page++
						uni.stopPullDownRefresh()
						for (let i of res.data) {
							that.listBox.push(i)
						}
						that.repairList = that.listBox

						that.isLong = true
						that.hasInfo = true
					}
				}).catch(function(reason) {
					uni.stopPullDownRefresh()
					// 处理网络错误
					that.hasNet = false
					that.isLong = false
				})
			},
			/**
			 * 搜索
			 */
			searchKey(key) {
				this.repairName = key
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getListOwnerRepairs(1)
			},
			/**
			 * 抢单
			 */
			grabbingRepair(repairId) {
				var that = this
				let data = {
					repairId: repairId,
					communityId: this.userCommunity.communityId,
					userId: this.userInfo.userId,
					userName: this.userInfo.userName
				}
				grabbingRepair(data).then((res) => {
					if (res.code == 0 && res.msg == "成功") {
						console.log('抢单成功', res)
						uni.showToast({
							title: '抢单成功',
							icon: 'none',
							duration: 1500
						});
						//  重新渲染列表
						that.page = 1
						that.records = 0
						that.listBox = []
						that.getListOwnerRepairs(1)
					}
				}).catch(function(reason) {
					uni.showToast({
						title: reason.data,
						icon: 'none',
						duration: 1500
					});
				})
			},
			/**
			 * 转单
			 */
			turnSingle(item, action) {
				uni.navigateTo({
					url: '/pages/home/repairOrder/orderHandle/orderHandle?action=' +
						action + "&repairId=" + item.repairId +
						"&repairType=" + item.repairType +
						"&preStaffId=" + item.preStaffId +
						"&preStaffName=" + item.preStaffName +
						"&repairObjType=" + item.repairObjType
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getListOwnerRepairs(1)
			}
		}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
	}

	.scroll-box {
		width: 100%;
		// height: 86vh;
		padding-bottom: 32rpx;

		.item {
			width: 100%;
			padding: $nl-padding-top-main;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			margin-bottom: 32rpx;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 18rpx;

				.time {
					margin-left: auto;
					font-size: $uni-font-size-sm;
					color: $nl-text-color-grey;
				}
			}

			.bottom {
				display: flex;
				align-items: center;

				.repair-people {
					color: $nl-text-color-grey;
					margin-right: auto;
				}

				.botton-list {
					display: flex;
				}

			}
		}
	}
</style>
